<template>
  <div class="source-drawer">
    <el-drawer
      ref="drawer"
      :visible="visible"
      @update:visible='cancel'
      :with-header="false"
      direction="rtl"
      size="40%"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <node-form ref="NodeForm"></node-form>
        <el-divider></el-divider>
        <message-flow-form ref="messageFlowForm"></message-flow-form>
        <div class="demo-drawer__footer">
          <div class="demo-drawer__footer">
            <el-row type="flex" justify="center">
              <el-col :span="4">
                <el-button @click="cancel">取 消</el-button>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="save">确 定</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import messageFlowForm from "@/views/Flow/common/message-form.vue";
import { generalMixin } from "./general-mixin";
export default {
  components: {
    messageFlowForm
  },
  mixins: [generalMixin]
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-drawer__body {
    overflow: scroll;
  }
  .el-divider--horizontal {
    margin: 0 0 24px;
  }
  .el-drawer__header {
    border-top: 1px solid #dce3e8;
    border-bottom: 1px solid #dce3e8;
    background: #f1f3f4;
    padding: 5px 10px;
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .el-drawer {
    border-left: 1px solid rgb(220, 227, 232);
    background-color: rgb(251, 251, 251);
  }
  .demo-drawer__content {
    padding: 20px;
  }
}
</style>
